import React, { useEffect, useState } from 'react'
import Category from '@/components/Category'
import AddSpu from '../addSpu';
import { Button, Card, Pagination, Space, Table } from 'antd'
import type { PaginationProps } from 'antd';
import { PlusOutlined, FormOutlined, InfoCircleOutlined, DeleteOutlined } from '@ant-design/icons';
import { useAppSelector } from "@/app/hooks";
import { selectCategory } from '@/components/Category/slice';
import { getSpuList, deleteSpu, type SpuModel } from '@/api/spu'
export default function SPU() {
  let [showAddSpu, setShowAddSpu] = useState(false)
  let [page, setPage] = useState(1);
  let [limit, setLimit] = useState(3);
  let [total, setTotal] = useState(0);
  let [spuData, setSpuData] = useState<SpuModel[]>([])
  const category = useAppSelector(selectCategory)
  const { category3Id } = category
  let getSpuListAsync = async () => {
    if (category3Id) {
      let result = await getSpuList(page, limit, category3Id)
      setSpuData(result.records)
      setTotal(result.total)
    }
  }
  useEffect(() => {
    getSpuListAsync()
  }, [category3Id, page, limit])

  const showTotal: PaginationProps['showTotal'] = total => `共有 ${total} 条`;
  // 页码布局相关
  // const itemRender: PaginationProps['itemRender'] = (_, type, originalElement) => {

  // };

  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      width: 80,
      render: (value: any, row: any, index: number) => {
        return index + 1;
      },
    },
    {
      title: 'SPU名称',
      dataIndex: 'spuName',
    },
    {
      title: 'SPU描述',
      dataIndex: 'description',
    },
    {
      title: '操作',
      render: (value: any, row: any, index: number) => {
        return (
          <Space>
            {/* 新增 */}
            <Button type="primary" icon={<PlusOutlined />} size="middle" onClick={() => {
              setShowAddSpu(true)
            }} ></Button>
            {/* 编辑 */}
            <Button
              icon={<FormOutlined />}
              size="middle"
              style={{ backgroundColor: 'orange', color: '#fff' }}
            ></Button>
            {/* 查看 */}
            <Button
              icon={<InfoCircleOutlined />}
              size="middle"
              style={{ backgroundColor: 'gray', color: '#fff' }}
            ></Button>
            {/* 删除 */}
            <Button
              icon={<DeleteOutlined />}
              size="middle"
              style={{ backgroundColor: '#f89898', color: '#fff' }}
              onClick={async () => {
                await deleteSpu(value.id)
                getSpuListAsync()
              }}
            ></Button>
          </Space>
        )
      },
    }
  ];

  return (
    <div>
      <Category></Category>
      <Space></Space>
      {/* 主页面 */}
      
      { !showAddSpu && <Card>
          <Button icon={<PlusOutlined />} className='mb-20' >添加SPU</Button>
          <Table
            rowKey="id"
            dataSource={spuData}
            columns={columns}
            bordered
            pagination={false}
          />
          <Pagination
            className='mt-20'
            current={page}
            pageSize={limit}
            total={total}
            showSizeChanger
            showQuickJumper
            pageSizeOptions={[3, 5, 10, 15]}
            onChange={(page, pageSize) => {
              setPage(page)
              setLimit(pageSize)
            }}
            showTotal={showTotal}
          />
        </Card> }
        
      { showAddSpu && <AddSpu></AddSpu> }
    </div>
  )
}
